<template>
	<div>
		<div class="cx-tong-content">
			<div class="cx-tong-nav">
				<span>一级分类:</span>
				<a class="cx-tc-active" href="#/tc">全部</a>
				<a href="###">便利店服务</a>
				<a href="###">洗涤服务</a>
				<a href="###">家政服务</a>
				<a href="###">家庭维修</a>
				<a href="###">搬家服务</a>
				<a href="###">汽车服务</a>
				<a href="###">网购服务</a>
				<a href="###">旅游服务</a>
				<a href="###">拍照服务</a>
				<a href="###">婚庆服务</a>
				<a href="###">互联网服务</a>
			</div>
			<div class="cx-tong-food">
				<ul>
					<li>
						<a href=""><img src="../assets/tc/all-1-1.png" alt="" /></a>
						<h3>洗涤服务</h3>
						<h5>礼拜五商城</h5>
					</li>
					<li>
						<a href=""><img src="../assets/tc/all-1-2.jpg" alt="" /></a>
						<h3>家庭维修</h3>
						<h5>礼拜五商城</h5>
					</li>
					<li>
						<a href=""><img src="../assets/tc/all-1-3.jpg" alt="" /></a>
						<h3>搬家服务</h3>
						<h5>礼拜五商城</h5>
					</li>
					<li>
						<a href=""><img src="../assets/tc/all-1-4.png" alt="" /></a>
						<h3>家政服务</h3>
						<h5>礼拜五商城</h5>
					</li>
					<li>
						<a href=""><img src="../assets/tc/all-2-1.png" alt="" /></a>
						<h3>汽车服务</h3>
						<h5>礼拜五商城</h5>
					</li>
					<li>
						<a href=""><img src="../assets/tc/all-2-2.jpg" alt="" /></a>
						<h3>网购服务</h3>
						<h5>礼拜五商城</h5>
					</li>
					<li>
						<a href=""><img src="../assets/tc/all-2-3.png" alt="" /></a>
						<h3>旅游服务</h3>
						<h5>礼拜五商城</h5>
					</li>
					<li>
						<a href=""><img src="../assets/tc/all-2-4.jpg" alt="" /></a>
						<h3>拍照服务</h3>
						<h5>礼拜五商城</h5>
					</li>
					<li>
						<a href=""><img src="../assets/tc/all-3-1.jpg" alt="" /></a>
						<h3>婚庆服务</h3>
						<h5>礼拜五商城</h5>
					</li>
					<li>
						<a href=""><img src="../assets/tc/all-3-2.jpg" alt="" /></a>
						<h3>互联网服务</h3>
						<h5>礼拜五商城</h5>
					</li>
					<li>
						<a href="#/fridaybldb"><img src="../assets/tc/all-3-3.jpg" alt="" /></a>
						<h3>礼拜五便利店(北关店)</h3>
						<h5>礼拜五商城</h5>
					</li>
					<li>
						<a href="#/fridaybldm"><img src="../assets/tc/all-3-4.jpg" alt="" /></a>
						<h3>礼拜五便利店(天马店)</h3>
						<h5>礼拜五商城</h5>
					</li>
				</ul>
			</div>
		</div>
		<router-view></router-view>
		
	</div>
</template>

<script>
	import Fridaybldb from './fridaybldb'
	import Fridaybldm from './fridaybldm'
	export default {
		name: "tc",
		components:{
			Fridaybldb,Fridaybldm,
		},
		mounted(){
			$(function(){
				$(".cx-tong-nav>a").click(function(){
					$(".cx-tong-nav>a").removeClass("cx-tc-active");
					$(this).addClass("cx-tc-active");
				});
			});
		}
	}
</script>

<style scoped>
	.cx-tong-content {
		width: 1280px;
		margin: 0 auto;
	}
	
	.cx-tong-nav {
		width: 1280px;
		margin: 0 auto;
		display: inline-block;
		border-bottom: solid 1px #ddd;
	}
	
	.cx-tong-nav span {
		line-height: 55px;
		color: #666;
	}
	
	.cx-tong-nav a {
		padding: 5px 10px;
		margin: 0 5px;
	}
	
	.cx-tong-nav a:hover {
		color: white;
		background-color: #4B943D;
	}
	
	.cx-tc-active {
		background-color: #4B943D;
		color: #fff;
	}
	.cx-tong-food{
		margin-bottom: 15px;
	}
	.cx-tong-food ul {
		overflow: hidden;
	}
	
	.cx-tong-food li:nth-child(4n+1) {
		margin-left: 0;
	}
	
	.cx-tong-food li {
		width: 303px;
		float: left;
		margin: 20px 0 0 20px;
		background-color: #F8F6F7;
		border: 1px solid #ececec;
	}
	
	.cx-tong-food ul li:hover {
		border: 1px solid forestgreen;
	}
	
	.cx-tong-food li img {
		width: 301px;
		height: 301px;
	}
	
	.cx-tong-food li h3 {
		text-align: center;
		margin: 20px 0 10px 0;
		font-size: 24px;
	}
	
	.cx-tong-food li div {
		text-align: center;
	}
	
	.cx-tong-food li h5 {
		text-align: center;
		color: #666;
		padding: 0 10px;
		margin-bottom: 10px;
		font-weight: 900;
	}
</style>